<template>
    <div>

        <el-breadcrumb separator="/" style="padding: 10px 10px">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item><a href="/">产品功能</a></el-breadcrumb-item>
            <el-breadcrumb-item>产品信息页面</el-breadcrumb-item>
        </el-breadcrumb>
        <div style="width: 100%;display: flex;justify-content: center;margin-top: 20px;">

            <el-card class="box-card"
                     shadow="never">
                <!--面包屑-->
                <el-form ref="form" :model="form" label-width="90px" label-position="left">

                    <div style="display: flex">

                        <el-form-item label="蛋糕名称">
                            <el-input v-model="form.cname"></el-input>
                        </el-form-item>
                        <el-form-item label="英文名称" style="margin-left: 20px;">
                            <el-input v-model="form.ename"></el-input>
                        </el-form-item>

                    </div>


                    <el-form-item label="产品介绍">
                        <el-input type="textarea" v-model="form.introduce"></el-input>
                    </el-form-item>


                    <el-form-item label="产品警告">
                        <el-input type="textarea" v-model="form.perror"></el-input>
                    </el-form-item>

                    <el-form-item label="蛋糕标签">
                        <el-checkbox-group v-model="form.type">
                            <el-checkbox label="人气" name="type"></el-checkbox>
                            <el-checkbox label="情侣" name="type"></el-checkbox>
                            <el-checkbox label="力荐单品" name="type"></el-checkbox>
                            <el-checkbox label="儿童" name="type"></el-checkbox>
                            <el-checkbox label="聚会" name="type"></el-checkbox>
                            <el-checkbox label="生日" name="type"></el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>

                    <el-form-item label="蛋糕原材料">
                        <el-tag
                                :key="tag"
                                v-for="tag in form.dynamicTags"
                                closable
                                :disable-transitions="false"
                                @close="handleClose(tag)">
                            {{tag}}
                        </el-tag>
                        <el-input
                                class="input-new-tag"
                                v-if="inputVisible"
                                v-model="inputValue"
                                ref="saveTagInput"
                                size="small"
                                @keyup.enter.native="handleInputConfirm"
                                @blur="handleInputConfirm"
                        >
                        </el-input>
                        <el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
                    </el-form-item>


                    <el-form-item label="保鲜条件">
                        <el-input v-model="form.fresh"></el-input>
                    </el-form-item>

                    <el-form-item label="甜度">
                        <div class="block">
                            <el-rate v-model="form.sweet"></el-rate>
                        </div>
                    </el-form-item>

                    <el-form-item label="价格">
                        <el-input placeholder="请输入内容" v-model="form.price">
                            <template slot="append">元 / 每磅</template>
                        </el-input>
                    </el-form-item>

                    <el-form-item label="产品规格">
                        <el-checkbox-group v-model="form.weight">
                            <el-checkbox-button label="1磅" name="type"></el-checkbox-button>
                            <el-checkbox-button label="2磅" name="type"></el-checkbox-button>
                            <el-checkbox-button label="3磅" name="type"></el-checkbox-button>
                            <el-checkbox-button label="4磅" name="type"></el-checkbox-button>
                            <el-checkbox-button label="5磅" name="type"></el-checkbox-button>
                        </el-checkbox-group>
                    </el-form-item>


                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">立即创建</el-button>
                        <el-button>取消</el-button>
                    </el-form-item>
                </el-form>
            </el-card>
        </div>
    </div>

</template>

<script>
    export default {
        computed: {},
        data() {
            return {
                form: {
                    cname: '',
                    ename: '',
                    introduce: '',
                    perror: '',
                    fresh: '',
                    type: [],
                    delivery: false,
                    weight: [],
                    sweet: 0,
                    dynamicTags: [],
                    price: '',
                },


                inputVisible: false,
                inputValue: '',
            }
        },
        methods: {
            onSubmit() {
                console.log(this.form)
            },
            handleClose(tag) {
                this.form.dynamicTags.splice(this.form.dynamicTags.indexOf(tag), 1);
            },

            showInput() {
                this.inputVisible = true;
                this.$nextTick(_ => {
                    this.$refs.saveTagInput.$refs.input.focus();
                });
            },

            handleInputConfirm() {
                let inputValue = this.inputValue;
                if (inputValue) {
                    this.form.dynamicTags.push(inputValue);
                }
                this.inputVisible = false;
                this.inputValue = '';
            },


        }
    }
</script>

<style scoped>
    .el-tag + .el-tag {
        margin-left: 10px;
    }

    .button-new-tag {
        margin-left: 10px;
        height: 32px;
        line-height: 30px;
        padding-top: 0;
        padding-bottom: 0;
    }

    .input-new-tag {
        width: 90px;
        margin-left: 10px;
        vertical-align: bottom;
    }

    .block {
        margin-top: 11px;
    }

    .box-card {
        width: 950px;
        padding: 30px;
        box-sizing: border-box;

    }
</style>